<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters
    const centerX = 240;
    const centerY = 230;
    const radiusR = 200;
    const sideL = 160;

    // Helper function to draw 'x' marks for the magnetic field
    function drawX(x, y, size) {
        ctx.beginPath();
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        ctx.moveTo(x + size, y - size);
        ctx.lineTo(x - size, y + size);
        ctx.stroke();
    }

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Arial';

    // 1. Draw the circular region
    ctx.beginPath();
    ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the magnetic field 'x' marks
    const xSize = 8;
    // Positions are chosen to mimic the original diagram's distribution
    // Left of the square
    drawX(centerX - 150, centerY - 130, xSize);
    drawX(centerX - 150, centerY, xSize);
    drawX(centerX - 150, centerY + 130, xSize);
    drawX(centerX - 75, centerY - 80, xSize);
    drawX(centerX - 75, centerY + 60, xSize);

    // Top and bottom, within the circle
    drawX(centerX, centerY - 160, xSize);
    drawX(centerX, centerY + 160, xSize);
    drawX(centerX + 100, centerY - 160, xSize);

    // Inside the square
    drawX(centerX + 80, centerY - 50, xSize);
    drawX(centerX + 80, centerY + 50, xSize);

    // Right of the square
    drawX(centerX + sideL + 20, centerY - 60, xSize);
    drawX(centerX + sideL + 20, centerY + 60, xSize);


    // 3. Draw the square coil 'abcd'
    const ax = centerX;
    const ay = centerY - sideL / 2;
    const bx = centerX + sideL;
    const by = ay;
    const cx = centerX + sideL;
    const cy = centerY + sideL / 2;
    const dx = centerX;
    const dy = cy;

    ctx.beginPath();
    ctx.moveTo(ax, ay);
    ctx.lineTo(bx, by);
    ctx.lineTo(cx, cy);
    ctx.lineTo(dx, dy);
    ctx.closePath();
    ctx.stroke();

    // 4. Add labels
    ctx.fillStyle = 'black';
    ctx.font = 'italic 22px Arial';

    // Labels for the square corners
    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('a', ax - 5, ay - 5);
    ctx.fillText('d', dx - 5, dy + 8);

    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('b', bx + 5, by - 5);
    ctx.textBaseline = 'top';
    ctx.fillText('c', cx + 5, cy + 5);

    // Label for the center 'O'
    ctx.beginPath();
    ctx.arc(centerX, centerY, 3.5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('O', centerX - 10, centerY);

    // Label for the radius 'R'
    ctx.textAlign = 'center';
    ctx.fillText('R', centerX - 90, centerY + 100);

    // 5. Add the caption
    ctx.font = '24px "KaiTi", "SimSun", serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 9-17 图', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>